<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-user"></i> 角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-button
        style="margin-bottom:10px;"
        type='primary'
        icon="el-icon-plus"
        @click='showDialog = true'
      >添加角色</el-button>
      <!-- 表格 -->
      <el-table
        :data='RoleData.slice((currentPage-1)*pagesize,currentPage*pagesize)'
        border
        style='width: 100%; font-size: 15px'
      >
        <el-table-column
          prop='roleId'
          label='角色ID'
          min-width="30"
        ></el-table-column>
        <el-table-column
          prop='roleMc'
          label='角色名称'
          min-width='80'
        ></el-table-column>
        <el-table-column
          prop='roleMs'
          label='角色描述'
          min-width='100'
        ></el-table-column>
        <el-table-column
          label='操作'
          max-width='200'
        >
          <template slot-scope="scope">
            <el-button
              type='danger'
              icon="el-icon-delete"
              size="mini"
              @click='delRole(scope.row)'
            >删除</el-button>
            <el-button
              type='success'
              icon="el-icon-s-custom"
              size="mini"
              @click='RoleConfig(scope.row)'
            >分配页面</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="RoleData.length"
      >
      </el-pagination>
      <!-- 弹层 -->
      <el-dialog
        title="添加角色"
        :visible.sync="showDialog"
        width="37%"
        center
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        @close='closeFn'
      >
        <el-form
          ref='RoleForm'
          :model="RoleForm"
          :rules='rules'
          label-width="80px"
          label-position="right"
        >
          <el-form-item label="角色名称">
            <el-input
              v-model='RoleForm.roleMc'
              placeholder='角色名称'
              style='width: 87%'
            ></el-input>
          </el-form-item>
          <el-form-item
            label="角色描述"
            prop='name'
          >
            <el-input
              v-model='RoleForm.roleMs'
              placeholder="角色描述"
              style='width: 87%'
            />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addRoleSubmit"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoleListAPI, roleSyncAPI } from '@/api/backStage.js';
export default {
    name: 'personnel',
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            isEdit: false, // 是否为编辑状态
            showDialog: false, // 弹层显示
            RoleData: [],
            RoleForm: {
                roleMc: '', // 角色名称
                roleMs: '' // 角色描述
            },
            rules: {
                jsmc: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.getRoleListData();
    },
    methods: {
        // 分页
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        },
        // 获取角色管理列表
        async getRoleListData() {
            let res = await getRoleListAPI({
                token: this.$store.state.user.token,
                mc: 'null'
            });
            if (res.code == 'succ') {
                this.RoleData = res.result;
            }
        },
        // 添加角色
        async addRoleSubmit() {
            const res = await roleSyncAPI({
                token: this.$store.state.user.token,
                czlx: 'add',
                mc: this.RoleForm.roleMc,
                ms: this.RoleForm.roleMs,
                OprID: this.$store.state.user.oprid,
                RoleID: 'null'
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
                // 重新渲染表格数据
                this.getRoleListData();
            }
            this.showDialog = false;
        },
        // 删除角色
        async delRole(row) {
            const res = await roleSyncAPI({
                token: this.$store.state.user.token,
                czlx: 'del',
                mc: row.roleMc,
                ms: row.roleMs,
                OprID: this.$store.state.user.oprid,
                roleID: row.roleId
            });
            if (res.code == 'succ') {
                this.$message.success('删除' + res.message);
                // 重新渲染表格数据
                this.getRoleListData();
            }
        },
        // 分配页面
        RoleConfig(row) {
            this.$router.push({ path: '/main/userRouterList', query: { roleid: row.roleId } });
        },
        // 关闭弹窗的回调
        closeFn() {
            this.RoleForm = {};
            this.isEdit = false;
            this.$refs.RoleForm.resetFields();
        }
    }
};
</script>

<style scoped>
</style>
